import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import base from "@src/store/base";
import member from "@src/store/member";
import { getWxaQrCode } from "@src/api/member";

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [{
    store: base,
    fields: ['businessName', 'businessLogo']
  }, {
    store: member,
    fields: ['wxName', 'categoryImage']
  }],
  properties: {
    scene: String
  },
  data: {
    canvasTemplate: null,
    shareImg: null,
  },
  lifetimes: {
    ready() {
      this.fetchData();
    }
  },
  methods: {
    handleImageOk(e) {
      this.setData({ shareImg: e.detail.path });
      this.triggerEvent('full-img', { shareImg: e.detail.path })
    },
    handleSimpleImgOk(e) {
      this.setData({ shareImg: e.detail.path });
      this.triggerEvent('simple-img', { shareImg: e.detail.path })
    },
    fetchData() {
      let data = {
        page: `pages/index/main`,
        scene: this.data.scene
      };
      getWxaQrCode(data).then(res => {
        if (res.code === 0) {
          this.setData({ wxaQrCode: res.data });
          this.initFullPoster();
          this.initSimplePoster();
        } else {
          wx.showToast({ title: "二维码获取错误", icon: "none", duration: 3000 });
        }
      })
    },
    initFullPoster() {
      // todo 这里逻辑有问题, 非会员无法生成海报的
      console.log("this.data.businessName", this.data.businessName)
      this.updateStoreBindings();
      console.log("this.data.businessName", this.data.businessName)
      let defaultWidth = 667;
      let defaultHeight = 849;
      let toFullUrl = getApp().toFullUrl
      let canvasTemplate = {
        background: "#fff",
        width: defaultWidth + "rpx",
        height: defaultHeight + "rpx",
        views: [{
          //top背景
          type: "image",
          url: toFullUrl("/wxapp/static/posterAndShare/pic_background.png"),
          css: {
            top: "0rpx",
            left: 0 + "rpx",
            width: 667 + "rpx",
            height: 424 + "rpx",
            mode: "aspectFill"
          }
        }, {
          //头像
          type: "image",
          url: toFullUrl(this.data.businessLogo),
          css: {
            top: "40rpx",
            left: 55 + "rpx",
            width: "93rpx",
            height: "93rpx",
            mode: "aspectFill",
            borderRadius: "50%"
          }
        },

        {
          //昵称
          type: "text",
          text: this.data.wxName,
          css: {
            top: "61rpx",
            left: "179rpx",
            width: 380 + "rpx",
            textAlign: "left",
            fontSize: "32rpx",
            color: "#090909"
          }
        },
        {
          //卡
          type: "image",
          url: toFullUrl(this.data.categoryImage),
          css: {
            top: "167rpx",
            left: (defaultWidth - 417) / 2 + "rpx",
            width: "417rpx",
            height: "251rpx",
            mode: "aspectFill",
            borderRadius: "17rpx"
          }
        },
        {
          //center背景
          type: "image",
          url: toFullUrl("/wxapp/static/posterAndShare/pic_top_up.png"),
          css: {
            top: "345rpx",
            left: 0 + "rpx",
            width: defaultWidth + "rpx",
            height: 105 + "rpx"
          }
        },
        {
          //bottom背景
          type: "image",
          url: toFullUrl("/wxapp/static/posterAndShare/pic_top_down.png"),
          css: {
            top: "500rpx",
            left: 0 + "rpx",
            width: defaultWidth + "rpx",
            height: 89 + "rpx"
          }
        }, {
          //二维码
          type: "image",
          url: this.data.wxaQrCode,
          css: {
            top: "480rpx",
            left: (defaultWidth - 205) / 2 + "rpx",
            width: "205rpx",
            height: "205rpx",
            mode: "scaleToFill"
          }
        },
        {
          type: "text",
          text: "长按识别小程序立即成为会员！",
          css: {
            top: "694rpx",
            left: "0rpx",
            width: defaultWidth + "rpx",
            textAlign: "center",
            fontSize: "27rpx",
            color: "#000000"
          }
        },
        {
          type: "text",
          text: `会员服务由${this.data.businessName}提供`,
          css: {
            top: "769rpx",
            left: "0rpx",
            width: defaultWidth + "rpx",
            textAlign: "center",
            fontSize: "28rpx",
            color: "#B2B2B2"
          }
        }
        ]
      };

      this.setData({ canvasTemplate: canvasTemplate })
    }
    ,
    initSimplePoster() {
      let defaultWidth = 750;
      let defaultHeight = 600;
      let toFullUrl = getApp().toFullUrl
      let canvasTemplate = {
        background: "#E8F6FD",
        width: defaultWidth + "rpx",
        height: defaultHeight + "rpx",
        views: [
          {
            //卡片
            type: "image",
            url: toFullUrl(this.data.categoryImage),
            css: {
              top: "130rpx",
              left: (defaultWidth - 505) / 2 + "rpx",
              width: "505rpx",
              height: "313rpx",
              mode: "aspectFill",
              borderRadius: "17rpx"
            }
          }, {
            //白色遮盖背景
            type: "image",
            url: toFullUrl("/wxapp/static/posterAndShare/member-bg.png"),
            css: {
              top: "344rpx",
              left: "0rpx",
              width: "750rpx",
              height: "256rpx"
            }
          }
        ]
      };
      this.setData({ canvasTemplateSimple: canvasTemplate })
    }
  }
})
